<%--
  Created by IntelliJ IDEA.
  User: 0927
  Date: 2020/9/28
  Time: 12:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Sales</title>

    <!-- 销售界面：处理砍价，处理预约，车辆上下架，销售业绩，个人客户档案 -->
    <!-- Bootstrap -->
    <link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
<div class="container-fluid">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid" style="background-color: white;">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">精翼首页</a>
            </div>
            <div>
                <!--向左对齐-->
                <ul class="nav  navbar-left">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" style=" padding: 5px 0 0 0;">
                            <img alt="" class="img-circle" src="../../images/zly.png" width="40px" height="40px" />
                            <span style="color: #0e0101;font-size: 15px">
								<i>赵丽颖</i>
							</span>
                        </a>
                    </li>
                </ul>
                <!-- <form class="navbar-form navbar-left" role="search">
                    <button type="submit" class="btn btn-default">
                    向左对齐-提交按钮
                </button>
                </form> -->
                <p class="navbar-text navbar-left">欢迎</p>
                <!--向右对齐-->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 登录</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 信箱</a></li>
                    <!-- <span class="badge">3</span> -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            销售员中心 <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">个人资料</a></li>
                            <li><a href="#">修改头像</a></li>
                            <li><a href="#">设置</a></li>
                            <li class="divider"></li>
                            <li><a href="#">安全退出</a></li>
                            <li class="divider"></li>
                            <!-- <li><a href="#">另一个分离的链接</a></li> -->
                        </ul>
                    </li>
                </ul>
                <!-- <form class="navbar-form navbar-right" role="search">
                    <button type="submit" class="btn btn-default">
                    向右对齐-提交按钮
                </button>
                </form> -->
                <!-- <p class="navbar-text navbar-right">向右对齐-文本</p> -->
            </div>
        </div>
    </nav>
</div>

<div class="container-fluid">
    <div class="header-box" style="background-color: #f8f8f8;padding: 10px;">
        <div class="row">
            <div class="col-md-5" style="float: right;">
                <form class="bs-example bs-example-form" role="form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="请输入">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-primary">
                                <span class="glyphicon glyphicon-search"></span>&nbsp搜索
                            </button>
                            </span>
                    </div>
                </form>
            </div>

            <div class="col-md-7">
                <b style="font-size: 20px;">预约记录<span class="badge">3</span></b>
            </div>
        </div>
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-6">
                <button type="button" class="btn btn-primary btn-sm">
                    <span class="glyphicon glyphicon-refresh"></span>刷新
                </button>
                <button type="button" class="btn btn-danger btn-sm">
                    <span class=" glyphicon glyphicon-trash"></span>批量删除
                </button>
                <button type="button" class="btn bg-success btn-sm" data-toggle="modal" data-target="#myModalss">
                    <span class="glyphicon glyphicon-plus"></span>增加
                </button>
            </div>
        </div>
        <div class="tab-pane fade in active" >
            <table class="table table-hover table-responsive">
                <caption>所有预约客户必须通过电话验证</caption>
                <thead>
                <tr>
                    <td><input type="checkbox"></td>
                    <th>预约时间</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>年龄</th>
                    <th>车辆</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2020-09-27 11:30</td>
                    <td>李四</td>
                    <td>18151139235</td>
                    <td>30</td>
                    <td>2202</td>
                    <td>
                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2020-09-27 11:30</td>
                    <td>李四</td>
                    <td>18151139235</td>
                    <td>30</td>
                    <td>2202</td>
                    <td>
                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2020-09-27 11:30</td>
                    <td>李四</td>
                    <td>18151139235</td>
                    <td>30</td>
                    <td>2202</td>
                    <td>
                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2020-09-27 11:30</td>
                    <td>李四</td>
                    <td>18151139235</td>
                    <td>30</td>
                    <td>2202</td>
                    <td>
                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2020-09-27 11:30</td>
                    <td>李四</td>
                    <td>18151139235</td>
                    <td>30</td>
                    <td>2202</td>
                    <td>
                        <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                        <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                    </td>
                </tr>

                <tr>

                    <td colspan="7">
                        <div style="text-align: center;">
                            <ul class="pagination">
                                <!-- <ul class="pagination pager"></ul> -->
                                <li><a href="#">&laquo;</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-xs-3" id="myScrollspy">
                <ul class="nav nav-tabs nav-stacked" id="myNav">
                    <li class="active"><a href="#section-1">销售业绩</a></li>
                    <li><a href="#section-2">砍价处理</a></li>
                    <li><a href="#section-3">车辆上下架</a></li>
                    <li><a href="#section-4">个人客户</a></li>
                    <li><a href="#section-5">负责车辆</a></li>
                </ul>
            </div>
            <div class="col-xs-9">
                <h3 id="section-1">销售业绩</h3>
                <div id="main3" style="width: 700px;height:400px;"></div>
                <hr>
                <h3 id="section-2">砍价处理</h3>

                <form class="bs-example bs-example-form" role="form">
                    <div class="row">
                        <div class="input-group input-group-sm col-md-6" style="margin: 0 auto;">
                            <input type="text" class="form-control" placeholder="请输入">
                            <span class="input-group-btn">
                                    <button class="btn btn-default btn-primary" type="button">
                                        <span class="glyphicon glyphicon-search"></span>&nbsp搜索
                                </button>
                                </span>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-md-6" style="margin-left: 20px;">
                        <button type="button" class="btn btn-primary btn-sm">
                            <span class="glyphicon glyphicon-refresh">刷新</span>
                        </button>
                    </div>
                </div>


                <div class="row">
                    <div class="tab-pane fade in active" >
                        <table class="table table-hover table-responsive">

                            <thead>
                            <tr>

                                <th>买家</th>
                                <th>电话</th>
                                <th>年龄</th>
                                <th>出价</th>
                                <th>底价</th>
                                <th>标价</th>
                                <th>车辆编号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>

                                <td>Tanmay</td>
                                <td>18151139235</td>
                                <td>22</td>
                                <td>13.3</td>
                                <td>10.3</td>
                                <td>15.0</td>
                                <td>335</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>

                                <td>Tanmay</td>
                                <td>18151139235</td>
                                <td>22</td>
                                <td>13.3</td>
                                <td>10.3</td>
                                <td>15.0</td>
                                <td>335</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>

                                <td>Tanmay</td>
                                <td>18151139235</td>
                                <td>22</td>
                                <td>13.3</td>
                                <td>10.3</td>
                                <td>15.0</td>
                                <td>335</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>

                                <td>Tanmay</td>
                                <td>18151139235</td>
                                <td>22</td>
                                <td>13.3</td>
                                <td>10.3</td>
                                <td>15.0</td>
                                <td>335</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>

                                <td>Tanmay</td>
                                <td>18151139235</td>
                                <td>22</td>
                                <td>13.3</td>
                                <td>10.3</td>
                                <td>15.0</td>
                                <td>335</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="8">
                                    <div style="text-align: center;">
                                        <ul class="pagination">
                                            <!-- <ul class="pagination pager"></ul> -->
                                            <li><a href="#">&laquo;</a></li>
                                            <li class="active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">&raquo;</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <hr>
                <h3 id="section-3">车辆上下架</h3>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label  class="col-sm-1 control-label">车牌号</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" placeholder="请输入车牌号">
                                </div>
                                <label  class="col-sm-1 control-label">颜色</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" placeholder="请输入颜色">
                                </div>
                                <label class="col-sm-1 control-label">能否过户</label>
                                <div class="col-sm-3">
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 能
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 不能
                                    </label>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">种类</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" placeholder="请输入种类">
                                </div>
                                <label class="col-sm-1 control-label">车型</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" placeholder="请输入车型">
                                </div>
                                <label class="col-sm-1 control-label">车系</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" placeholder="请输入车系">
                                </div>
                            </div>
                            <div class="form-group">

                                <label for="inputfile" class="col-sm-2 control-label">车辆VIN码</label>
                                <div class="col-sm-3">
                                    <input type="file" id="inputfile">
                                    <p class="help-block">点击上传行驶证图片</p>
                                </div>
                                <label for="inputfile" class="col-sm-2 control-label">车辆图片</label>
                                <div class="col-sm-3">
                                    <input type="file" >
                                    <p class="help-block">点击上传车辆图片</p>
                                </div>
                            </div>
                            <div>
                                <label  class="col-sm-2 control-label">价格(万元)</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="请输入价格">
                                </div>
                                <label  class="col-sm-2 control-label">行驶公里(万公里)</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" placeholder="输入行驶公里">
                                </div>
                            </div>
                            <div class="form-group">
                                <label>车况描述</label>
                                <textarea class="form-control" rows="4"></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary">提交</button>
                        </form>
                    </div>
                </div>





                <hr>
                <h3 id="section-4">个人客户</h3>
                <form class="bs-example bs-example-form" role="form">
                    <div class="row">
                        <div class="input-group input-group-sm col-md-6" style="margin: 0 auto;">
                            <input type="text" class="form-control" placeholder="请输入">
                            <span class="input-group-btn">
                                    <button class="btn btn-default btn-primary" type="button">
                                        <span class="glyphicon glyphicon-search"></span>&nbsp搜索
                                </button>
                                </span>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-md-6" style="margin-left: 20px;">
                        <button type="button" class="btn btn-primary btn-sm">
                            <span class="glyphicon glyphicon-refresh"></span>刷新
                        </button>
                        <button type="button" class="btn btn-danger btn-sm">
                            <span class=" glyphicon glyphicon-trash"></span>批量删除
                        </button>
                        <button type="button" class="btn bg-success btn-sm" data-toggle="modal" data-target="#myModal02">
                            <span class="glyphicon glyphicon-plus"></span>增加
                        </button>
                    </div>
                </div>


                <div class="row">
                    <div class="tab-pane fade in active" id="home">
                        <table class="table table-hover table-responsive">
                            <caption>所有预约客户必须通过电话验证</caption>
                            <thead>
                            <tr>
                                <td><input type="checkbox"></td>
                                <th>姓名</th>
                                <th>电话</th>
                                <th>年龄</th>
                                <th>看过的车辆</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>Tanmay</td>
                                <td>18151139235</td>
                                <td>22</td>
                                <td>560001</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>Tanmay</td>
                                <td>18151139235</td>
                                <td>22</td>
                                <td>560001</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>Tanmay</td>
                                <td>18151139235</td>

                                <td>22</td>
                                <td>560001</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>Tanmay</td>
                                <td>18151139235</td>

                                <td>22</td>
                                <td>560001</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>Tanmay</td>
                                <td>18151139235</td>

                                <td>22</td>
                                <td>560001</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <div style="text-align: center;">
                                        <ul class="pagination">
                                            <!-- <ul class="pagination pager"></ul> -->
                                            <li><a href="#">&laquo;</a></li>
                                            <li class="active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">&raquo;</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <hr>
                <h3 id="section-5">负责车辆</h3>
                <form class="bs-example bs-example-form" role="form">
                    <div class="row">
                        <div class="input-group input-group-sm col-md-6" style="margin: 0 auto;">
                            <input type="text" class="form-control" placeholder="请输入">
                            <span class="input-group-btn">
                                    <button class="btn btn-default btn-primary" type="button">
                                        <span class="glyphicon glyphicon-search"></span>&nbsp搜索
                                </button>
                                </span>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-md-6" style="margin-left: 20px;">
                        <button type="button" class="btn btn-primary btn-sm">
                            <span class="glyphicon glyphicon-refresh"></span>刷新
                        </button>
                        <button type="button" class="btn btn-danger btn-sm">
                            <span class=" glyphicon glyphicon-trash"></span>批量删除
                        </button>
                        <button type="button" class="btn bg-success btn-sm" data-toggle="modal" data-target="#myModal02">
                            <span class="glyphicon glyphicon-plus"></span>增加
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="tab-pane fade in active">
                        <table class="table table-hover table-responsive">
                            <thead>
                            <tr>
                                <td><input type="checkbox"></td>
                                <th>编号</th>
                                <th>车主</th>
                                <th>车牌号</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>133</td>
                                <td>王二</td>
                                <td>粤A666666</td>
                                <td>已上架</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>133</td>
                                <td>王二</td>
                                <td>粤A666666</td>
                                <td>已下架</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>133</td>
                                <td>王二</td>
                                <td>粤A666666</td>
                                <td>已上架</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>133</td>
                                <td>王二</td>
                                <td>粤A666666</td>
                                <td>已上架</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>133</td>
                                <td>王二</td>
                                <td>粤A666666</td>
                                <td>已下架</td>
                                <td>
                                    <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <div style="text-align: center;">
                                        <ul class="pagination">
                                            <!-- <ul class="pagination pager"></ul> -->
                                            <li><a href="#">&laquo;</a></li>
                                            <li class="active"><a href="#">1</a></li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">4</a></li>
                                            <li><a href="#">5</a></li>
                                            <li><a href="#">&raquo;</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>



<!-- 模态框（Modal） -->
<div class="modal fade" id="myModalss" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    增加
                </h4>
            </div>
            <div class="modal-body">
                <!-- 表单 -->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">聚焦</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">
                            禁用
                        </label>
                        <div class="col-sm-10">
                            <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
                        </div>
                    </div>
                    <fieldset disabled>
                        <div class="form-group">
                            <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）
                            </label>
                            <div class="col-sm-10">
                                <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）
                            </label>
                            <div class="col-sm-10">
                                <select id="disabledSelect" class="form-control">
                                    <option>禁止选择</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                    <div class="form-group has-success">
                        <label class="col-sm-2 control-label" for="inputSuccess">
                            输入成功
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputSuccess">
                        </div>
                    </div>
                    <div class="form-group has-warning">
                        <label class="col-sm-2 control-label" for="inputWarning">
                            输入警告
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputWarning">
                        </div>
                    </div>
                    <div class="form-group has-error">
                        <label class="col-sm-2 control-label" for="inputError">
                            输入错误
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputError">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交
                </button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<script src="..\..\plugins\jquery\jquery.min.js"></script>
<script src="..\..\plugins\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style>
    /* Custom Styles */

    ul.nav-tabs {
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }

    ul.nav-tabs li {
        margin: 0;
        border-top: 1px solid #ddd;
    }

    ul.nav-tabs li:first-child {
        border-top: none;
    }

    ul.nav-tabs li a {
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }

    ul.nav-tabs li.active a,
    ul.nav-tabs li.active a:hover {
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }

    ul.nav-tabs li:first-child a {
        border-radius: 4px 4px 0 0;
    }

    ul.nav-tabs li:last-child a {
        border-radius: 0 0 4px 4px;
    }

    ul.nav-tabs.affix {
        top: 30px;
        /* Set the top position of pinned element */
    }
</style>
<script>
    $(document).ready(function() {
        $("#myNav").affix({
            offset: {
                top: 515
            }
        });
    });

    var myChart = echarts.init(document.getElementById('main3'));
    option = {
        xAxis: {
            type: 'category',
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '30%']
        },
        visualMap: {
            type: 'piecewise',
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [{
                gt: 1,
                lt: 3,
                color: 'rgba(0, 180, 0, 0.5)'
            }, {
                gt: 5,
                lt: 7,
                color: 'rgba(0, 180, 0, 0.5)'
            }]
        },
        series: [{
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
                color: 'green',
                width: 5
            },
            markLine: {
                symbol: ['none', 'none'],
                label: {
                    show: false
                },
                data: [{
                    xAxis: 1
                }, {
                    xAxis: 3
                }, {
                    xAxis: 5
                }, {
                    xAxis: 7
                }]
            },
            areaStyle: {},
            data: [
                ['2019-10-10', 200],
                ['2019-10-11', 400],
                ['2019-10-12', 650],
                ['2019-10-13', 500],
                ['2019-10-14', 250],
                ['2019-10-15', 300],
                ['2019-10-16', 450],
                ['2019-10-17', 300],
                ['2019-10-18', 100]
            ]
        }]
    };

    myChart.setOption(option);
</script>

</body>

</html>
